<%= render :partial => "/tr8n/common/header" %>

<style>
	.documentation_section_title {
      background: none repeat scroll 0 0 #F5F5F5;
      padding: 20px;
			color: #888888 !important;
			font-size: 20px;		
      <%=tr8n_style_attribute_tag('text-align', 'left')%>;
	}
	
	.documentation_section {
		padding:10px;
		font-family: arial;
    <%=tr8n_style_attribute_tag('text-align', 'left')%>;
	}
	
  .screenshot {
      -moz-box-shadow: 3px 3px 4px #000;
      -webkit-box-shadow: 3px 3px 4px #000;
      box-shadow: 3px 3px 4px #000;	 
			margin:15px;
  }
	
	.documentation_section p {
		margin-bottom: 15px;
    font-family: arial;
    <%=tr8n_style_attribute_tag('text-align', 'left')%>;
	}
	
  .documentation_section h2 {
	    color: #888888;
      font-size: 24px;
      font-weight: normal;
      letter-spacing: -1px;
      margin: 0 0 5px;
      padding: 3px 0 0;
      <%=tr8n_style_attribute_tag('text-align', 'left')%>;
  }
	
  .documentation_section h3 {
      color: #888888;
      font-size: 18px;
      font-weight: normal;
      letter-spacing: -1px;
      margin: 0 0 5px;
      padding: 3px 0 0;
      <%=tr8n_style_attribute_tag('text-align', 'left')%>;
  }  

  .documentation_section li {
      <%=tr8n_style_attribute_tag('text-align', 'left')%>;
  }

	.documentation_table {
	}

  .documentation_table th {
    font-weight:bold;
		padding: 5px;
    border: 1px solid #ccc;
		<%=tr8n_style_attribute_tag('text-align', 'left')%>;
  }

  .documentation_table td {
    padding: 5px;
		border: 1px solid #ccc;
    <%=tr8n_style_attribute_tag('text-align', 'left')%>;
  }

  .documentation_table tr {
  	background-color: white;
  }

  .documentation_table tr:hover {
    background-color: #eee;
  }
	
	.documentaiton_note {
		color: #666;
		font-style:italic;
		font-size: 10px;
    <%=tr8n_style_attribute_tag('text-align', 'left')%>;
	}
	
	.code_snippet {
		margin-top:15px;
    margin-bottom:15px;
		background: #F6F7FA;
		padding:5px;
		border: 1px dotted #ccc;
		font-size:12px;
		font-family: arial;
    <%=tr8n_style_attribute_tag('text-align', 'left')%>;
	}
	
  .data_list {
    margin-top:15px;
    margin-bottom:15px;
    padding:5px;
		margin-left:20px;
		list-style:circle;
    <%=tr8n_style_attribute_tag('text-align', 'left')%>;
  }
	
  .snippet {
    border:1px dotted #ccc; 
    background-color:#F8F8F8; 
    padding:10px; 
    font:12px 'Bitstream Vera Sans Mono','Courier',monospace;
    margin-bottom:10px;
    <%=tr8n_style_attribute_tag('text-align', 'left')%>;
  }

  .snippet li {
 	  font:12px 'Bitstream Vera Sans Mono','Courier',monospace;
    <%=tr8n_style_attribute_tag('text-align', 'left')%>;
  }
</style>

<table style="width:100%">
	<tr>
		<td style="width:160px;vertical-align:top;text-align:left;padding:5px;">
      <%= render :partial => "navigation" %>
		</td>
		<td style="width:4px;background-color:#F5F5F5;border-right:1px solid #ccc;">
			
		</td>
		<td style="vertical-align:top;text-align:left;padding:0px;">
